<script setup lang="ts">
import { usePageConfig } from './config/index.ts'
import dictApi from '@/service/api/system/dict'
import NTableBuilder from '@/components/NTableBuilder/index.vue'
import { useTable } from '@/hooks/useTable.ts'
defineOptions({
  name: 'SystemSetting',
})

/**
 * 获取页面配置
 * */
const pageConfig = usePageConfig()
const { table, tableProps, updateDefault } = useTable(pageConfig)

/**
 * Tabs
 * */
const tabsList = ref([])
const tabChange = (e: string) => {
  updateDefault('default', {
    ...pageConfig.edit.default.defaultValue,
    publicType: e,
  })
  table.tableInfo.queryForm.publicType = e
  table.queryData()
}

const getTabs = async () => {
  const { data } = await dictApi.typeList('dict_type')
  tabsList.value = data
  table.tableInfo.queryForm.publicType = data[0].itemValue
  table.queryData()
}

onMounted(() => {
  getTabs()
})
</script>
<template>
  <n-table-builder v-model="table.tableInfo" v-bind="tableProps">
    <n-tabs
      v-model:value="table.tableInfo.queryForm.publicType"
      type="line"
      animated
      @update:value="tabChange"
    >
      <n-tab-pane
        v-for="item in tabsList"
        :key="item.itemValue"
        :name="item.itemValue"
        :tab="item.label"
      />
    </n-tabs>
  </n-table-builder>
</template>

<style scoped lang="scss"></style>
